<template>
  <div class="kanban">
    <div class="box">
      <div class="boxleft">
        <CardSlot :title="'告警状态'" :width="''">
          <div class="alarm">
            <div class="alarm_box">
              <div class="alarm_img">
                <img src="@/assets/images/ico_report.png" alt="" />
              </div>
              <div class="alarm_text">
                <div class="alarm_title">在线</div>
                <div class="alarm_state">通讯状态</div>
              </div>
            </div>
            <div class="alarm_box">
              <div class="alarm_img">
                <img src="@/assets/images/ico_fault.png" alt="" />
              </div>
              <div class="alarm_text">
                <div class="alarm_title">正常</div>
                <div class="alarm_state">故障状态</div>
              </div>
            </div>
            <div class="alarm_box">
              <div class="alarm_img">
                <img src="@/assets/images/ico_alarm.png" alt="" />
              </div>
              <div class="alarm_text">
                <div class="alarm_title">有告警</div>
                <div class="alarm_state">告警状态</div>
              </div>
            </div>
          </div>
        </CardSlot>

        <CardSlot :title="'峰平谷用电'" :width="''">
          <div class="analysis">
            <div class="analysisTip">
              <div class="tip">
                <div class="tipcolor" style="background-color: #287ce7" />
                <div class="tiptitle">总有功尖峰</div>
              </div>
              <div class="tip">
                <div class="tipcolor" style="background-color: #30c6dc" />
                <div class="tiptitle">总有功高峰</div>
              </div>
              <div class="tip">
                <div class="tipcolor" style="background-color: #27b4ff" />
                <div class="tiptitle">总有功平峰</div>
              </div>
              <div class="tip">
                <div class="tipcolor" style="background-color: #ffb63f" />
                <div class="tiptitle">总有功低谷</div>
              </div>
              <div class="tip">
                <div class="tipcolor" style="background-color: #ff751d" />
                <div class="tiptitle">总有功深谷</div>
              </div>
            </div>
            <div class="analysisChart">
              <div id="daily" class="daily" />
              <div id="monthly" class="monthly" />
            </div>
          </div>
        </CardSlot>

        <CardSlot :title="'用电统计'" :width="''" :slotShow="true">
          <div id="ranking" class="ranking" />
          <template #header>
            <el-select
              v-model="rankingValue"
              placeholder="选择显示数据"
              size="small"
              style="width: 130px"
              @change="changeRanking"
            >
              <el-option
                v-for="item in rankingOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </CardSlot>
      </div>
      <div class="boxright">
        <CardSlot :title="'配电室'" :width="''">
          <div class="room">
            <div class="room_box">
              <div class="room_box_top">
                <div class="room_box_title">
                  <div>开关</div>
                  <div>20</div>
                </div>
                <div class="room_box_img">
                  <img src="@/assets/images/ico_room1.png" alt="" />
                </div>
              </div>
              <div class="room_box_bot">
                <div class="room_box_cont">
                  <div>在线个数：20</div>
                  <div>
                    在线率：
                    <p>100%</p>
                  </div>
                </div>
                <div class="room_box_more">
                  <div>
                    更多设备<img
                      src="@/assets/images/ico_more.png"
                      alt="更多设备"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="room_box">
              <div class="room_box_top">
                <div class="room_box_title">
                  <div>表计</div>
                  <div>456</div>
                </div>
                <div class="room_box_img">
                  <img src="@/assets/images/ico_room2.png" alt="" />
                </div>
              </div>
              <div class="room_box_bot">
                <div class="room_box_cont">
                  <div>在线个数：456</div>
                  <div>
                    在线率：
                    <p>100%</p>
                  </div>
                </div>
                <div class="room_box_more">
                  <div>
                    更多设备<img
                      src="@/assets/images/ico_more.png"
                      alt="更多设备"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="room_box">
              <div class="room_box_top">
                <div class="room_box_title">
                  <div>摄像头</div>
                  <div>563</div>
                </div>
                <div class="room_box_img">
                  <img src="@/assets/images/ico_room3.png" alt="" />
                </div>
              </div>
              <div class="room_box_bot">
                <div class="room_box_cont">
                  <div>在线个数：563</div>
                  <div>
                    在线率：
                    <p>100%</p>
                  </div>
                </div>
                <div class="room_box_more">
                  <div>
                    更多设备<img
                      src="@/assets/images/ico_more.png"
                      alt="更多设备"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="room_box">
              <div class="room_box_top">
                <div class="room_box_title">
                  <div>变压器</div>
                  <div>20</div>
                </div>
                <div class="room_box_img">
                  <img src="@/assets/images/ico_room4.png" alt="" />
                </div>
              </div>
              <div class="room_box_bot">
                <div class="room_box_cont">
                  <div>在线个数：20</div>
                  <div>
                    在线率：
                    <p class="red">100%</p>
                  </div>
                </div>
                <div class="room_box_more">
                  <div>
                    更多设备<img
                      src="@/assets/images/ico_more.png"
                      alt="更多设备"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </CardSlot>

        <CardSlot :title="'总功耗'" :width="''">
          <div id="consumption" class="consumption" />
        </CardSlot>

        <CardSlot :title="'运行信息'" :width="''" :slotShow="true">
          <div id="information" class="information" />
          <template #header>
            <el-select
              v-model="infoValue"
              placeholder="选择显示数据"
              size="small"
              style="width: 130px"
              @change="changeInfo"
            >
              <el-option
                v-for="item in infoOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </CardSlot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, onUnmounted } from "vue";
import { ElSelect, ElOption } from "element-plus";
import * as echarts from "echarts";
import CardSlot from "@/components/cardslot/index.vue";

let threedom;
let dailyChart;
let monthlyChart;
let rankingChart;
let consumptionChart;
let infoChart;

const initDaily = () => {
  if (dailyChart !== null && dailyChart !== "" && dailyChart !== undefined) {
    dailyChart.dispose();
  }
  dailyChart = echarts.init(document.getElementById("daily"));
  dailyChart.clear();
  let option = {
    title: {
      text: "2024-10-08（当日）",
      left: "center",
      bottom: 0,
      textStyle: {
        color: "#333",
        fontSize: 14,
        fontWeight: "normal"
      }
    },
    tooltip: {
      trigger: "item"
    },
    legend: {
      show: false
    },
    color: ["#287CE7", "#30C6DC", "#27B4FF", "#FFB63F", "#FF751D"],
    series: [
      {
        name: "",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 8,
          borderColor: "#fff",
          borderWidth: 1
        },
        label: {
          show: false,
          position: "center"
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 14
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: "总有功尖峰" },
          { value: 735, name: "总有功高峰" },
          { value: 580, name: "总有功平峰" },
          { value: 484, name: "总有功低谷" },
          { value: 300, name: "总有功深谷" }
        ]
      }
    ]
  };

  option && dailyChart.setOption(option);
};

const initMonthly = () => {
  if (
    monthlyChart !== null &&
    monthlyChart !== "" &&
    monthlyChart !== undefined
  ) {
    monthlyChart.dispose();
  }
  monthlyChart = echarts.init(document.getElementById("monthly"));
  monthlyChart.clear();
  let option = {
    title: {
      text: "2024-10（当月）",
      left: "center",
      bottom: 0,
      textStyle: {
        color: "#333",
        fontSize: 14,
        fontWeight: "normal"
      }
    },
    tooltip: {
      trigger: "item"
    },
    legend: {
      show: false
    },
    color: ["#287CE7", "#30C6DC", "#27B4FF", "#FFB63F", "#FF751D"],
    series: [
      {
        name: "",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 8,
          borderColor: "#fff",
          borderWidth: 1
        },
        label: {
          show: false,
          position: "center"
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 14
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: "总有功尖峰" },
          { value: 735, name: "总有功高峰" },
          { value: 580, name: "总有功平峰" },
          { value: 484, name: "总有功低谷" },
          { value: 300, name: "总有功深谷" }
        ]
      }
    ]
  };

  option && monthlyChart.setOption(option);
};

let rankingValue = ref("日");
const rankingOptions = [
  {
    value: "日",
    label: "日"
  },
  {
    value: "月",
    label: "月"
  }
];
const changeRanking = value => {
  rankingValue.value = value;
  initDaily();
};
// 用电统计
const initRanking = () => {
  if (rankingChart != null && rankingChart != "" && rankingChart != undefined) {
    rankingChart.dispose();
  }
  rankingChart = echarts.init(document.getElementById("ranking"));
  rankingChart.clear();
  let option = {
    tooltip: {
      trigger: "axis"
    },
    legend: {
      icon: "rect",
      right: "10px",
      itemWidth: 11,
      itemHeight: 3
    },
    grid: {
      top: "15%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    color: ["#30C6DC", "#287CE7"],
    xAxis: {
      type: "category",
      data: ["1日9时", "1日10时", "1日11时", "1日12时", "1日13时"],
      nameTextStyle: {
        color: "#333"
      },
      // boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: "#ccc"
        }
      },
      splitLine: {
        lineStyle: {
          color: "#ccc"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#333"
      }
    },
    yAxis: {
      type: "value",
      name: "kw",
      nameTextStyle: {
        color: "#333"
      },
      axisLabel: {
        // formatter: '{value}'
        color: "#333"
      }
    },
    series: [
      {
        name: "本周期",
        type: "bar",
        barWidth: 10,
        data: [12, 24, 13, 28, 17, 15, 19, 20, 14],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(151, 187, 214, 1)"
            },
            {
              offset: 0.7,
              color: "rgba(22, 218, 203, 1)"
            }
          ])
        }
      },
      {
        name: "上周期",
        type: "bar",
        barWidth: 10,
        data: [19, 20, 14, 25, 23, 12, 10, 12, 15],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "RGBA(149, 177, 200, 1)"
            },
            {
              offset: 0.7,
              color: "RGBA(2, 168, 254, 1)"
            }
          ])
        }
      }
    ]
  };

  option && rankingChart.setOption(option);
};

// 总功耗
const initConsumption = () => {
  if (
    consumptionChart != null &&
    consumptionChart != "" &&
    consumptionChart != undefined
  ) {
    consumptionChart.dispose();
  }
  consumptionChart = echarts.init(document.getElementById("consumption"));
  consumptionChart.clear();
  let option = {
    tooltip: {
      trigger: "axis"
    },
    legend: {
      icon: "rect",
      right: "10px",
      itemWidth: 11,
      itemHeight: 3
    },
    grid: {
      top: "25%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      data: ["1日9时", "1日10时", "1日11时", "1日12时", "1日13时"],
      nameTextStyle: {
        color: "#333"
      },
      // boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: "#ccc"
        }
      },
      splitLine: {
        lineStyle: {
          color: "#ccc"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#333"
      }
    },
    yAxis: {
      type: "value",
      name: "℃"
    },
    series: [
      {
        name: "总有功率",
        type: "line",
        data: [2000, 2300, 2320, 2500, 2100, 2600],
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(41, 105, 244, 1)"
            },
            {
              offset: 0.7,
              color: "rgba(41, 105, 244, 0)"
            }
          ])
        }
      }
    ]
  };

  option && consumptionChart.setOption(option);
};

// 运行信息
let infoValue = ref("S1A1-1");
const infoOptions = [
  { value: "S1A1-1", label: "S1A1-1" },
  { value: "S1A1-2", label: "S1A1-2" },
  { value: "S1A1-3", label: "S1A1-3" }
];
const changeInfo = value => {
  infoValue.value = value;
};
const initInfo = () => {
  if (infoChart != null && infoChart != "" && infoChart != undefined) {
    infoChart.dispose();
  }
  infoChart = echarts.init(document.getElementById("information"));
  infoChart.clear();
  let option = {
    tooltip: {
      trigger: "axis"
    },
    legend: {
      right: "10px",
      itemWidth: 11,
      itemHeight: 3
    },
    grid: {
      top: "25%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      data: ["1日9时", "1日10时", "1日11时", "1日12时", "1日13时"],
      nameTextStyle: {
        color: "#333"
      },
      axisLine: {
        lineStyle: {
          color: "#ccc"
        }
      },
      splitLine: {
        lineStyle: {
          color: "#ccc"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#333"
      }
    },
    yAxis: {
      type: "value",
      name: "kw"
    },
    color: ["#287CE7", "#30C6DC", "#27B4FF", "#FFB63F", "#FF751D"],
    series: [
      {
        name: "A相电流",
        type: "line",
        data: [20, 23, 23, 25, 21, 26],
        smooth: false,
        itemStyle: {
          opacity: 0
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(40, 124, 231, 0.8)"
            },
            {
              offset: 0.9,
              color: "rgba(40, 124, 231, 0)"
            }
          ])
        }
      },
      {
        name: "B相电流",
        type: "line",
        data: [26, 21, 23, 25, 21, 26],
        smooth: false,
        itemStyle: {
          opacity: 0
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(48, 198, 220, 0.8)"
            },
            {
              offset: 0.9,
              color: "rgba(48, 198, 220, 0)"
            }
          ])
        }
      },
      {
        name: "C相电流",
        type: "line",
        data: [22, 24, 23, 25, 15, 17],
        smooth: false,
        itemStyle: {
          opacity: 0
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(39, 180, 255, 0.8)"
            },
            {
              offset: 0.9,
              color: "rgba(39, 180, 255, 0)"
            }
          ])
        }
      },
      {
        name: "中相电流",
        type: "line",
        data: [25, 23, 20, 25, 21, 16],
        smooth: false,
        itemStyle: {
          opacity: 0
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(255, 182, 63, 0.8)"
            },
            {
              offset: 0.9,
              color: "rgba(255, 182, 63, 0)"
            }
          ])
        }
      },
      {
        name: "三相电流平均",
        type: "line",
        data: [20, 23, 20, 25, 21, 19],
        smooth: false,
        itemStyle: {
          opacity: 0
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(255, 117, 29, 0.8)"
            },
            {
              offset: 0.9,
              color: "rgba(255, 117, 29, 0)"
            }
          ])
        }
      }
    ]
  };

  option && infoChart.setOption(option);
};

const resizeCharts = () => {
  dailyChart?.resize();
  monthlyChart?.resize();
  rankingChart?.resize();
  consumptionChart?.resize();
  infoChart?.resize();
};

onMounted(() => {
  threedom = document.getElementById("ThreeContainer");
  threedom.style.display = "none";

  initDaily();
  initMonthly();
  initRanking();
  initConsumption();
  initInfo();

  window.addEventListener("resize", resizeCharts(), false);
});

onUnmounted(() => {
  threedom.style.display = "block";

  dailyChart?.dispose();
  monthlyChart?.dispose();
  rankingChart?.dispose();
  consumptionChart?.dispose();
  infoChart?.dispose();

  window.removeEventListener("resize", resizeCharts, false);
});
</script>

<style scoped lang="scss">
// .kanban {
//   width: 100%;
//   height: 100%;
//   background-image: url("@/assets/images/img_otherbg.png");
//   background-repeat: no-repeat;
//   background-size: 100% 100%;
// }

.box {
  position: fixed;
  // top: 221px;
  top: 150px;
  // top: 11vh;
  left: 0;
  display: flex;
  width: 100%;
  // height: calc(100vh - 221px);
  height: calc(100vh - 150px);
  // height: calc(100vh - 11vh);
  padding: 0 24px;

  .boxleft {
    display: flex;
    flex: 1;
    flex-flow: column nowrap;
    flex-shrink: 1;
    align-items: center;
    justify-content: space-between;
    padding-right: 12px;

    .alarm {
      display: flex;
      align-items: center;
      height: 100%;

      .alarm_box {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;

        .alarm_img {
          width: 108px;
          height: 123px;

          img {
            max-width: 100%;
          }
        }

        .alarm_text {
          margin-left: 4px;

          .alarm_title {
            font-size: 20px;
            font-weight: bold;
            line-height: 20px;
            color: #0759d2;
          }

          .alarm_state {
            margin-top: 9px;
            font-size: 14px;
            line-height: 14px;
            color: #333;
          }
        }
      }
    }

    .analysis {
      width: 100%;
      height: 100%;

      .analysisTip {
        display: flex;
        align-items: center;
        justify-content: center;

        .tip {
          display: flex;
          align-items: center;
          margin-right: 16px;

          .tipcolor {
            width: 11px;
            height: 3px;
          }

          .tiptitle {
            margin-left: 4px;
            font-size: 12px;
            line-height: 12px;
            color: #333;
          }
        }
      }

      .analysisChart {
        display: flex;
        align-items: center;
        width: 100%;
        height: calc(100% - 12px);

        .daily {
          width: 50%;
          height: 100%;
        }

        .monthly {
          width: 50%;
          height: 100%;
        }
      }
    }

    .ranking {
      width: 100%;
      height: 100%;
    }
  }

  .boxright {
    display: flex;
    flex: 2;
    flex-flow: column nowrap;
    flex-shrink: 2;
    align-items: center;
    justify-content: space-between;
    padding-left: 12px;
  }

  .cardslot {
    width: 100%;
    height: 100%;
    flex: 2;

    &:nth-child(1) {
      flex: 1.3;
    }
  }

  .room {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 10px;

    .room_box {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-around;
      height: 100%;
      padding: 22px;
      margin-right: 21px;
      background-color: rgba($color: #eee, $alpha: 50%);
      border-radius: 10px;

      &:last-child {
        margin-right: 0;
      }

      .room_box_top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .room_box_title {
          div {
            font-size: 20px;
            font-weight: bold;
            line-height: 20px;
            color: #333;

            &:last-child {
              padding-top: 5px;
              color: #0759d2;
            }
          }
        }

        .room_box_img {
          width: 51px;
          height: 39px;

          img {
            max-width: 100%;
          }
        }
      }

      .room_box_bot {
        display: flex;
        align-items: last baseline;
        justify-content: space-between;
        padding-top: 25px;

        .room_box_cont {
          font-size: 14px;
          line-height: 14px;
          color: #333;

          div {
            display: flex;
            align-items: center;

            p.red {
              color: #f44;
            }
          }

          div:last-child {
            padding-top: 5px;
          }
        }

        .room_box_more {
          font-size: 12px;
          line-height: 12px;
          // color: #1864d5;
          color: #333;

          div {
            cursor: pointer;
          }

          img {
            padding-left: 5px;
          }
        }
      }

      &:nth-child(even) {
        .room_box_top {
          .room_box_title {
            div:last-child {
              color: #30c6dc;
            }
          }
        }
      }
    }
  }

  .consumption {
    width: 100%;
    height: 100%;
  }

  .information {
    width: 100%;
    height: 100%;
  }
}
</style>
